@import '~/assets/style/vars.less';

@font-face {
  font-family: 'baai-iconfont';  /* project id 1824165 */
  src: url('//at.alicdn.com/t/font_1824165_y47n2jg4da.eot');
  src: url('//at.alicdn.com/t/font_1824165_y47n2jg4da.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1824165_y47n2jg4da.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1824165_y47n2jg4da.woff') format('woff'),
  url('//at.alicdn.com/t/font_1824165_y47n2jg4da.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1824165_y47n2jg4da.svg#baai-iconfont') format('svg');
}

.icon {
  display: inline-block;
  font-family: "baai-iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // color: @color-secondary;
  color: inherit;

  // 图片(背景)图标处理
  // ------
  &-image-mode {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    &:before {
      display: none;
    }
  }

  // 字体图标皮肤处理
  // ------
  &-theme {
    &__black {
      color: @color-default;
    };
    &__secondary {
      color: @color-secondary;
    };
    &__silver {
      color: @color-silver;
    };
    &__clouds {
      color: @color-clouds;
    };
    &__concrete {
      color: @color-concrete;
    };
    &__lights {
      color: @color-lights;
    };
    &__muted {
      color: @color-muted;
    };
    &__white {
      color: @color-white;
    };
    &__important {
      color: @color-important;
    };
    &__sky {
      color: @color-sky;
    };
    &__primary {
      color: @color-primary;
    };
    &__golden {
      color: @color-golden;
    };
    &__danger {
      color: @color-danger;
    };
  }

  // 字体图标
  // ------
  &-add:before {
    content: "\e78f";
  }

  &-arrow {
    &,&-up, &-down, &-left, &-right {
      &:before {
        content: "\e799";
      }
    }

    &, &-right {
      transform: rotate(0);
    }

    &-up {
      transform: rotate(-90deg);
    }

    &-down {
      transform: rotate(90deg);
    }

    &-left {
      transform: rotate(180deg);
    }
  }

  &-checkbox:before {
    content: "\e79a";
  }

  &-delete:before {
    content: "\e79b";
  }

  &-collect:before {
    content: "\e79c";
  }

  &-message:before {
    content: "\e79d";
  }

  &-chat:before {
    content: "\e7a7";
  }

  &-link:before {
    content: "\e79e";
  }

  &-pencil:before {
    content: "\e79f";
  }

  &-write:before {
    content: "\e7a8";
  }

  &-picture:before {
    content: "\e7a0";
  }

  &-sub:before {
    content: "\e7a1";
  }

  &-triangle {
    &, &-up, &-down, &-left, &-right {
      &:before {
        content: "\e7a2";
      }
    }

    &, &-right {
      transform: rotate(-90deg);
    }

    &-up {
      transform: rotate(180deg);
    }

    &-down {
      // transform: rotate(0);
    }

    &-left {
      transform: rotate(90deg);
    }
  }

  &-safe:before {
    content: "\e7a3";
  }

  &-todo:before {
    content: "\e7a4";
  }

  &-star:before {
    content: "\e7a5";
  }

  &-trash:before {
    content: "\e7a6";
  }

  &-linkedin:before {
    content: "\e78d";
  }

  &-bilibili:before {
    content: "\e78e";
  }

  &-person:before {
    content: "\e790";
  }

  &-twitter:before {
    content: "\e791";
  }

  &-zhihu:before {
    content: "\e792";
  }

  &-search:before {
    content: "\e793";
  }

  &-wechat:before {
    content: "\e794";
  }

  &-logout:before {
    content: "\e795";
  }

  &-youtube:before {
    content: "\e796";
  }

  &-weibo:before {
    content: "\e797";
  }

  &-setting:before {
    content: "\e798";
  }

  &-merge:before {
    content: "\e600";
  }

  &-ariplane:before {
    content: "\e7a9";
  }
}
